import React, { Component } from "react"
import { inject, observer } from "mobx-react"
import { toJS } from 'mobx'
//引入常量
import CONSTS from "@/inits/consts"
//引入列表渲染组件
import UlRender from "@/pages/components/rights/list/list_conent/listul"
import ListRecycle from "@/pages/components/rights/list/list_reveal/listrecycle"
@inject('store')
@observer
/* 这是判断列表渲染组件 */
class IsListRender extends Component<any, any>{

  //1、清空回收站方法
  handleClearRecyle = () => {
    this.props.store.handleClearRecyle()
  }
  /******************  这是给子组件UlRender使用的函数*********************
   *  用于操作数据 传入这么多的原因是我并没有在子组件监听store 
   *  如果以后需要完整抽出,直接子组件监听store,便不需要传入这个函数,
   * 但是直接传入store将对store产生过大依赖,所以废弃这个方案 */
  //1、显示隐藏表单函数
  showModal = () => {
    this.props.store.changeVisible(); //调用store 修改显示与隐藏方法
    this.props.store.handleshowRender(CONSTS.TODONULL)//调用store 传入todo进行表单渲染
  };
  //2、根据点击的元素获取到的id进行查找,同时表单修改为修改表单
  handleGetTodoByid = (e: IeventType) => {
    const id = e.target.getAttribute('data-tag')
    let todo = {}
    if (id) {
      this.props.store.todos.map(item => { if (item.id == id) todo = toJS(item) })
      this.showModal()
      this.props.store.handleshowRender(todo)//调用store 传入todo进行表单渲染方法
      this.props.store.handleChangeNowstate(CONSTS.FROMTYPE.UPDATE) //调用store 修改表单状态方法
    }
  }

  //3、点击切换完成与未完成以及回收站
  handleDone = (e: IeventType, state: string) => {
    const id = e.target.parentNode.getAttribute("data-tag")
    this.props.store.updateTodoState(id, state)//调用store 修改todos中某个todo的state状态方法
  }
  //4、添加减少批量列表
  addBatchdels = (e: IeventType) => {
    const id = e.target.parentNode.getAttribute("data-tag")
    this.props.store.addBatchdels(id)//调用store 添加待选数组方法
  }
  //5、将需要的函数存入对象,方便传递
  FuncArr: FuncArr = {
    showModal: this.showModal,
    handleGetTodoByid: this.handleGetTodoByid,
    handleDone: this.handleDone,
    addBatchdels: this.addBatchdels,
  }
  /*************************  渲染  *************************** */

  render() {
    return (
      <div> {
        this.props.store.isShow == CONSTS.ISSHOW.PAST ?
          //①.首先,判断是否是已过期,如果已过期,渲染的样式中将不会有不同时间的title
          (<div>
            {<UlRender Arr={this.props.store.getArrObj.pastArr}
              Func={this.FuncArr}
              title={"已过期"}
              batchdel={this.props.store.batchdel}
              batchdels={this.props.store.batchdels}
            />}
          </div>) :
          //下面的div是非已过期的样式
          (<div>
            {<UlRender Arr={this.props.store.getArrObj.weekArr}
              Func={this.FuncArr}
              title={"未来七天"}
              batchdel={this.props.store.batchdel}
              batchdels={this.props.store.batchdels}
            />}
            {/* 下面两个UL同上 */}
            {<UlRender Arr={this.props.store.getArrObj.futerArr}
              Func={this.FuncArr}
              title={"未来或者未安排时间"}
              batchdel={this.props.store.batchdel}
              batchdels={this.props.store.batchdels} />}
            {<UlRender Arr={this.props.store.getArrObj.pastArr}
              Func={this.FuncArr}
              title={"已过期"}
              batchdel={this.props.store.batchdel}
              batchdels={this.props.store.batchdels} />}
            {/* ②调用回收站判断渲染组件 */}
            {<ListRecycle isShow={this.props.store.isShow} handleClearRecyle={this.handleClearRecyle} />}
          </div>)
      }</div>
    )
  }

}
export default IsListRender